<script setup lang="ts">
import { message } from "ant-design-vue";
import { watch } from "vue";
import { ref } from "vue"

const column = ref([
    {
        title: "姓名",
        dataIndex: "name",
        width: '120px'
    },
    {
        title: "年龄",
        dataIndex: "age",
        type: "number",
        width: '100px'
    },
    {
        title: "性别",
        dataIndex: ["other", "sex"],
        tooltip: true,
        // autoTooltip: true
        type: "select",
        valueType: "number",
        width: '100px',
        options: [
            {label: "榴莲", value:0},
            {label: "望返", value:1},
            {label: "丘壑", value:2},
            {label: "水仙花", value:3},
            {label: "拉布大江", value:4},
            {label: "鸿海的世界", value:5},
            {label: "鸿鹄之志", value:6},
            {label: "我是燕双鹰", value:7},
            {label: "未知", value:2, disabled: true},
        ],
        slotName: "sex"
    },
    {
        title: "note",
        dataIndex: "note",
        width: '180px',
        tooltip: true,
        // autoTooltip: true
    },
    {
        title: "lg",
        dataIndex: ["other", "lg"],
        width: '100px',
        rules: [
            {
                required: true
            },
        ]
    }
])

const data = ref([
    {
        name: "大逆转", 
        age: 22, 
        note: "欧洲杯半决赛，西班牙2比1逆转法国，队史第5次闯入决赛。开场仅9分钟，法国队姆巴佩助攻穆阿尼破门取得领先，亚马尔圆月弯刀一脚世界波1比1扳平，刷新欧洲杯最年轻进球纪录，4分钟后法国后卫孔德自摆乌龙，西班牙笑纳大礼完成逆转。爱奇艺体育", 
        id: "abcdefg",
        other: {
            sex: 1,
            lg: 123,
        }
    },
    {
        name: "某运动员", 
        age: 24, 
        note: "虽然创造了最佳成绩，但这实在太微不足道了，这届奥运会只是我的一个起点",
        id: "hijklmn",
        other: {
            sex: 0,
            lg: 123, 
        }
    },
])

for (let i = 3; i < 30; i++) {
    data.value.push({ name: "张三丰" + i });
}

const tableRef = ref();
const changeData = () => {
    data.value[0].name = "西毒欧阳锋"
}
const rowSelection = ref<{
    selectedRowKeys: string[],
    disableSelectedRowKeys: string[],
    selectedRows: any[],
    onChange: (selectedRowKeys: string[], selectedRows: any[]) => void
}>({
    selectedRowKeys: [], 
    disableSelectedRowKeys: [data.value[0].id],
    selectedRows: [],
    onChange: (selectedRowKeys: string[], selectedRows: any[]) => {
        rowSelection.value.selectedRowKeys = selectedRowKeys;
        rowSelection.value.selectedRows = selectedRows
    }
})

const rules = [
    {
        field: "name",
        required: true,
        message: '名称必填',
    },
    {
        field: "age",
        precision: 0,
        message: '只能整数',
    },
    {
        field: ["other", "sex"],
        required: true,
        message: '性别必填',
        validator: (a, b, c) => {
            return Promise.resolve()
        }
    }
]
const Editer = ref({
    selectedRowKeys: [data.value[0].id],
    rules: rules,
    onChange: (data) => {
        console.log("onChange", data)
    },
    onFocus: (a, b) => {
        console.log("onFocus", a, b)
    },
    onBlur: (a, b) => {
        console.log("onBlur", a, b)
    },
    onSelected: (a, b) => {
        console.log("onSelected", a, b)
    }
})
const validatorTable = async () => {
    await tableRef.value.validate();
}
const clearvalidatorTable = () => {
    tableRef.value.clearValidate();
}

const functions = ref({
    rowSelection: undefined,
    keepLastRowEmpty: false,
    showRowIndex: false,
    resizeCol: false,
    showRowDrag: false,
    showColDrag: false,
    readonly: false,
    readonlyLine1: false,
    openVirtualScroll: false,
    relateRowChosed: false,
    disabled: false,
    disabledLine2: false,
    sorter: false,
    openUndo: false
})

watch(() => functions.value.sorter, (val) => {
    if (val) {
        column.value.forEach(column => {
            if(column.dataIndex === 'age' || column.dataIndex === 'name'){
                column.sorter = true
            }
        })
    }
})

const VirtualScroll = {
    scrollFlag: true,
    onScroll: (y: number) => {
        console.log('虚拟滚动了', y)
    },
    scrollLastFlag: true,
    onScrollLast: () => {
        console.warn('虚拟滚动, 到底了')
    }
}

const messageConfig = ref()
const changMessage = () => {
    messageConfig.value = messageConfig.value ? undefined : {
        "index": "Index",
        "menus": {
            "copyLabel": "Copy",
            "paetsLabel": "Paets",
            "copyDownLabel": "Copy Down",
            "addStepDownLabel": "Add Step Down",
            "insertBeforeLabel":"Insert Before [input]",
            "insertAfterLabel": "Insert After [input]",
            "insertAfterCopyLabel": "Insert Copy [input]",
            "deleteRowsLabel": "Delete Chose Rows"
        },
        "input": {
            "mustInt": "Please Input Int",
            "maxDecimal": "Please Input Floot []"
        },
        "disabledMoreArea": "Operate More Areas Not Yellow"
    }
}


</script>

<template>
    <div class="box">
        <div>
            <a-checkbox v-model:checked="functions.keepLastRowEmpty">保持最后一行为空数据</a-checkbox>
            <a-checkbox v-model:checked="functions.rowSelection">行选择</a-checkbox>
            <a-checkbox v-model:checked="functions.showRowIndex">显示行号</a-checkbox>
            <a-checkbox v-model:checked="functions.resizeCol">调整列宽</a-checkbox>
            <a-checkbox v-model:checked="functions.showRowDrag">拖动行</a-checkbox>
            <a-checkbox v-model:checked="functions.showColDrag">拖动列</a-checkbox>
            <a-checkbox v-model:checked="functions.readonly">只读模式</a-checkbox>
            <a-checkbox v-model:checked="functions.readonlyLine1">只读模式(仅第一行)</a-checkbox>
            <a-checkbox v-model:checked="functions.disabled">禁用模式</a-checkbox>
            <a-checkbox v-model:checked="functions.disabledLine2">禁用模式(仅第二行)</a-checkbox>
            <a-checkbox v-model:checked="functions.openVirtualScroll">开启虚部滚动</a-checkbox>
            <a-checkbox v-model:checked="functions.relateRowChosed">开启checkbox选择行与内容联动</a-checkbox>
            <a-checkbox v-model:checked="functions.sorter">开启排序</a-checkbox>
            <a-checkbox v-model:checked="functions.openUndo">开启撤销重做</a-checkbox>

            <div>
                <a-button @click="Editer.selectedRowKeys = [data[1].id]">选区手动选中第二行</a-button>
                <a-button @click="changMessage">语言变换</a-button>
                <a-button @click="validatorTable">验证表格内容</a-button>
                <a-button @click="clearvalidatorTable">验证清除</a-button>
            </div>

            <edit-table-vue3 ref="tableRef" :dataSource="data" :columns="column"
            :rowSelection="functions.rowSelection && rowSelection"
            :keepLastRowEmpty="functions.keepLastRowEmpty"
            :showRowIndex="functions.showRowIndex"
            :resizeCol="functions.resizeCol"
            :showRowDrag="functions.showRowDrag"
            :showColDrag="functions.showColDrag"
            :readonly="functions.readonlyLine1 ? [data[0].id] : functions.readonly"
            :disabled="functions.disabledLine2 ? [data[1].id] : functions.disabled"
            :openVirtualScroll="functions.openVirtualScroll && VirtualScroll"
            :relateRowChosed="functions.relateRowChosed"
            :customEditer="Editer"
            style="height: 500px"
            @scroll="VirtualScroll.onScroll"
            @scroll-last="VirtualScroll.onScrollLast"
            :messageConfig="messageConfig"
            :openUndo="functions.openUndo"
            ></edit-table-vue3>
        </div>
        <div class="right">
            <h4>表格数据 :</h4>
            [
            <p v-for="dt of data">{{ dt }}</p>
            ]
            <h4>选择数据 :</h4>
            [
            <p v-for="key of rowSelection.selectedRowKeys">{{ key }}</p>
            ]
            <br/>
            [
            <p v-for="row of rowSelection.selectedRows">{{ row }}</p>
            ]
        </div>
    </div>
</template>

<style scoped>
.box{
    font-size: 14px;
    display: grid;
    grid-template-columns: 50% calc(50% - 20px);
    gap: 20px;
    padding: 30px;
}
.right{
    background: #f5f5f5;
    padding: 10px;
    max-height: 80vh;
    overflow: auto;
}
button{
    margin: 8px 6px 8px 0;
}
h4{
    margin: 4px 0;
}
p{
    margin: 3px 0 3px 24px;
    font-size: 12px;
}
</style>
